<template>
	<div>
		<el-form class="dialog-layout" ref="userForm" :rules="rules" :model="state.ruleForm" size="default" label-width="auto">
			<el-form-item label="动态验证码" prop="code">
				<el-input v-model="state.ruleForm.code" placeholder="请输入动态验证码" clearable></el-input>
			</el-form-item>
		</el-form>
		<div class="dialog-btn">
			<el-button @click="back" size="default">返 回</el-button>
			<el-button type="primary" @click="onSubmit(userForm)" size="default">确 认</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { TotpVerify } from '/@/api/user/index';
import { useRouter } from 'vue-router';
const router = useRouter();
import { FormInstance, ElMessage, ElMessageBox } from 'element-plus';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['close']);

// 定义变量内容
const state = reactive({
	ruleForm: {
		verifyModule: 1,
		code: '',
	} as any,
});

// 关闭弹窗
const onCancel = () => {
	emit('close');
};

const rules = reactive({
	code: [{ required: true, message: '请输入动态验证码', trigger: ['blur', 'change'] }],
});
const userForm = ref<FormInstance>();
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			const params = {
				...state.ruleForm,
			};
			let data = await TotpVerify(params);
			if (data.data) {
				onCancel();
			} else {
				ElMessage.error('验证码错误');
			}
		}
	});
};
const back = () => {
	router.push('/home');
};
</script>
